<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=0,maximum-scale=1.0,maximum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
      * {
         margin: 0;
         padding: 0;
      }
       
      .box {
         position: relative;
         margin: 10px auto;
         width: 150px;
         height: 50px;
         /* 所有动画的基石，保留父元素中的3d空间（3d动画） */
         transform-style: preserve-3d;
         /* 透视（视距） */
         /* perspective: 500px; */
         transition: all .3s;
      }

      .box .box1,
      .box2 {
         position: absolute;
         left: 0;
         top: 0;
         width: 100%;
         height: 100%;
         font-size: 20px;
         text-align: center;
         line-height: 50px;
         color: cyan;
      }

      .box .box1 {
         background-color: green;
         z-index: 2;
         /* 使用Z轴的移动为3d中的视图前后位置 目的：为了实现 */
         transform: translatez(20px);
      }

      .box .box2 {
         background-color: greenyellow;
         z-index: 1;
         /* 先移动 */
          transform: translate3d(0, 25px, 0) rotate3d(1, 0, 0, -90deg);

      }

      .box:hover {
         transform: rotate3d(1, 0, 0, 90deg);
      }
      ul li{
         float: left;
         list-style: none;
         margin: 30px;
         perspective: 600px;
      }
      ul{
         margin-left: 50px;
         /* 以ul为视距会形成特殊的3d效果*/
         /* perspective: 500px */
      }
   </style>
</head>

<body>
   <ul>
      <li>
         <div class="box">
            <div class="box1">性感程序员</div>
            <div class="box2">在线找BUG</div>
         </div>
      </li>
      <li>
         <div class="box">
            <div class="box1">性感程序员</div>
            <div class="box2">在线找BUG</div>
         </div>
      </li>
      <li>
         <div class="box">
            <div class="box1">性感程序员</div>
            <div class="box2">在线找BUG</div>
         </div>
      </li>
      <li>
         <div class="box">
            <div class="box1">性感程序员</div>
            <div class="box2">在线找BUG</div>
         </div>
      </li>
      <li>
         <div class="box">
            <div class="box1">性感程序员</div>
            <div class="box2">在线找BUG</div>
         </div>
      </li>
   </ul>
</body>

</html>